<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin:0px;
            }
            .baidu{
                width: 790px;
                height:340px;
                border: 1px solid red;
                margin:20px auto;
                position: relative;
            }
            .baidu li{
                list-style: none;
            }
            .baidu ul li{
                position: absolute;
                display: none;
            }
            .baidu ol{
                position: absolute;
                right:20px;
                bottom: 20px;
            }
            .baidu ol li{
                float: left;
                width:20px;
                height: 20px;
                border-radius: 50%;
                background: #ccc;
                margin-right: 10px;
                text-align: center;
                font: 12px/20px "";
                cursor:pointer;
            }
            .baidu ol li.active{
                background: orange;
            }
            .baidu ul img{
                display: block;
            }
            .leftbtn,.rightbtn{
                font-size: 100px;
                color:#fff;
                text-decoration: none;
                position: absolute;
                top:50%;
                margin-top:-60px;

            }
            .leftbtn:hover,.rightbtn:hover{
                color: red;
            }
            .leftbtn{
                left:20px;
            }
            .rightbtn{
                right:20px;
            }
        </style>
    </head>
    <body>
        <div class="baidu">
            <ul>
                <li style="display: block;"><a href="#"><img src="./img/1.jpg"></a></li>			
                <li><a href="#"><img src="./img/2.jpg"></a></li>			
                <li><a href="#"><img src="./img/3.jpg"></a></li>	
                <li><a href="#"><img src="./img/4.jpg"></a></li>	
                <li><a href="#"><img src="./img/5.jpg"></a></li>	
                <li><a href="#"><img src="./img/6.jpg"></a></li>	
                <li><a href="#"><img src="./img/7.jpg"></a></li>	
                <li><a href="#"><img src="./img/8.jpg"></a></li>	
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ol>
            <a href="javascript:;" class="leftbtn">&lt;</a>
            <a href="javascript:;" class="rightbtn">&gt;</a>
        </div>
        
        <script>
            function Lunbotu(){
                this.quanbtn = document.querySelectorAll('.baidu ol li');
                this.images = document.querySelectorAll('.baidu ul li');
                this.rightBtn = document.querySelector('.rightbtn');
                this.leftBtn = document.querySelector('.leftbtn');
                this.baidu = document.querySelector('.baidu')
                
                this.num = 0;
                this.timer;
            }

            // 调用方法集
            Lunbotu.prototype.intn = function(){
                this.imgTap();
                this.btnRight()
                this.btnLeft()
                this.aotoLbt()
                this.stopAuto()
                this.outAuto()
            }

            Lunbotu.prototype.imgTap = function(){
                let that = this;
                for(let i=0;i<this.quanbtn.length;i++){
                    this.quanbtn[i].index = i;
                    this.quanbtn[i].onclick = function(){
                        that.hide();
                        
                        this.className = 'active';
                        that.num = this.index;
                        // console.log(this.index)
                        that.images[that.num].style.display = 'block';
                    }

                }
            }
            // 右滑动
            Lunbotu.prototype.btnRight = function(){
                let that = this;
                this.rightBtn.onclick = function(){
                    that.num++
                    // console.log(1)
                    if(that.num>that.quanbtn.length-1){
                        that.num = 0;
                    }
                    // console.log(that.num)
                    that.hide();
                        
                    that.quanbtn[that.num].className = 'active';
                    that.images[that.num].style.display = 'block';
                }
            }
            //左滑动
            Lunbotu.prototype.btnLeft = function(){
                let that = this;
                this.leftBtn.onclick = function(){
                    that.num--
                    // console.log(1)
                    if(that.num<0){
                        that.num = that.quanbtn.length-1;
                    }
                    // console.log(that.num)
                    that.hide();
                        
                    that.quanbtn[that.num].className = 'active';
                    that.images[that.num].style.display = 'block';
                }
            }

            // 规定时间，自动滑动图片
            Lunbotu.prototype.aotoLbt = function(){
                this.timer = setInterval(() => {
                    this.rightBtn.onclick();
                }, 1500);
            }

            // 划入暂停图片滑动
            Lunbotu.prototype.stopAuto = function(){
                let that = this;
                this.baidu.onmouseover = function(){
                    // console.log(1111)
                    clearInterval(that.timer)
                }
            }

            // 划出自动图片滑动
            Lunbotu.prototype.outAuto = function(){
                let that = this;
                this.baidu.onmouseout = function(){
                    that.timer = setInterval(() => {
                        that.rightBtn.onclick();
                    }, 1500);
                }
            }

            // 共用工具
            Lunbotu.prototype.hide = function(){
                let oActive = document.querySelector('.active');
                oActive.className = '';

                for(let i=0;i<this.images.length;i++){
                    this.images[i].style.display = 'none'
                }
            }

            // 实例化对象
            let lbt = new Lunbotu();
            // console.log(lbt)
            lbt.intn()

            // lbt.imgTap();
            // lbt.btnRight()
            // lbt.btnLeft()
            // lbt.aotoLbt()
            // lbt.stopAuto()
            // lbt.outAuto()
        </script>
    </body>
</html>